<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .zt{
        width: 500px;
        height: 500px;
        margin: auto;
        position: relative;
        background-color: yellow;
    }
    .J{
        width: 100px;
        height: 150px;
        background-image: url(https://oss.9ihub.com/test/20231017210305.png);
        background-size: 100px 150px;
        position: absolute;
        top:200px ;
        left: 200px;
        transition:transform 2s ease ;
        transform-origin: 50px 150px;
    }
    .Q{
        width: 100px;
        height: 150px;
        background-image: url(https://oss.9ihub.com/test/20231017210408.png);
        background-size: 100px 150px;
        position: absolute;
        top:200px ;
        left: 200px;

        transition:transform 2s ease ;
        transform-origin: 50px 150px;

    }
    .zt:hover .q3{
        transform: rotate(45deg);
    }
    .zt:hover .j3{
        transform: rotate(30deg);
    }
    .zt:hover .q2{
        transform: rotate(15deg);
    }
    .zt:hover .j2{
        transform: rotate(0deg);
    }
    .zt:hover .q1{
        transform: rotate(-15deg);
    }
    .zt:hover .j1{
        transform: rotate(-30deg);
    }
    
    
    
</style>
<body>
    <div class="zt">
        <div class="J j1"></div>
        <div class="Q q1"></div>
        <div class="J j2"></div>
        <div class="Q q2"></div>
        <div class="J j3"></div>
        <div class="Q q3"></div>
    </div>
</body>
</html>